<template>
  <div class="article-manager">
    <pages-header
        ref="pageHeader"
        :title="type == 'edit' ? '编辑帖子' : '添加帖子'"
    ></pages-header>
    <el-card :bordered="false" shadow="never" class="mt16">
      <el-form
          class="form"
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
      >
        <div class="goodsTitle acea-row">
          <div class="title">帖子信息</div>
        </div>
        <el-form-item label="标题：" prop="title" label-for="title">
          <el-input
              v-model="formValidate.title"
              placeholder="请输入"
              class="content_width"
              maxlength="80"
              show-word-limit
          />
        </el-form-item>
        <el-form-item v-if="type == 'edit'" label="作者：" prop="author" label-for="author">
          <el-input
              disabled
              v-model="formValidate.user_name"
              placeholder="请输入"
              class="content_width"
              maxlength="10"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="所在院校：" >
          <el-select v-model="formValidate.universit_id" clearable filterable>
            <el-option
                v-for="item in universitList"
                :key="item.id"
                :label="item.universit_name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="浏览：" >
          <el-input v-model="formValidate.browse"
                    class="content_width"
                    maxlength="80"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="帖子图片：" prop="images">
          <div class="acea-row">
            <div class="pictrue" v-for="(item, index) in formValidate.images" :key="index" draggable="true"
                 @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)"
                 @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)">
              <img v-lazy="item" />
              <i class="el-icon-error btndel" v-db-click @click="handleRemove(index)"></i>
            </div>
            <div v-if="formValidate.images.length < 10" class="upLoad acea-row row-center-wrapper" v-db-click
                 @click="modalPicTap('duo')">
              <i class="el-icon-picture-outline" style="font-size: 24px"></i>
            </div>
            <el-input v-model="formValidate.images[0]" style="display: none"></el-input>
          </div>

          <div class="tips-info">建议尺寸：800*800，可拖拽改变图片顺序，默认首张图为主图，最多上传10张</div>

          <!-- <div class="tips">(最多10张<br />750*750)</div> -->
        </el-form-item>
        <div class="goodsTitle acea-row">
          <div class="title">帖子内容</div>
        </div>
        <el-form-item label="帖子内容：" prop="content">
          <WangEditor style="width: 90%" :content="content" @editorContent="getEditorContent"></WangEditor>
        </el-form-item>
        <el-row :gutter="24">
          <!--                    <el-col :span="24">-->
          <!--                        <el-form-item label="原文链接：">-->
          <!--                            <el-input v-model="formValidate.url" placeholder="请输入" element-id="url" style="width: 60%"/>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->
          <el-col :span="24">
            <el-form-item label="帖子状态:">
              <el-select v-model="formValidate.status">
                <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" class="submission" v-db-click @click="onsubmit">提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-dialog :visible.sync="modalPic" :modal-append-to-body="false" width="950px" scrollable title="上传商品图" :close-on-click-modal="false">
      <uploadPictures :isChoice="isChoice" @getPic="getPic" @getPicD="getPicD" :gridBtn="gridBtn" :gridPic="gridPic"
                      v-if="modalPic"></uploadPictures>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import uploadPictures from '@/components/uploadPictures';
import WangEditor from '@/components/wangEditor/index.vue';
import { cmsAddApi, createApi, categoryTreeListApi } from '@/api/cms';
import {getPostsListApi} from "@api/crud/posts";
import {getUniversitListApi} from "@api/crud/universit";
export default {
  name: 'addArticle',
  components: { uploadPictures, WangEditor },
  data() {
    const validateUpload = (rule, value, callback) => {
      if (this.formValidate.image_input) {
        callback();
      } else {
        callback(new Error('请上传图文封面'));
      }
    };
    const validateUpload2 = (rule, value, callback) => {
      if (!this.formValidate.cid) {
        callback(new Error('请选择文章分类'));
      } else {
        callback();
      }
    };
    return {
      dialog: {},
      isChoice: '',
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      loading: false,
      formValidate: {
        id: 0,
        title: '',
        user_name: '',
        user_id: '',
        image_input: '',
        content: '',
        browse: 0,
        status: 0,
        pic: '',
        images: [],
      },
      content: '',
      ruleValidate: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        cid: [
          {
            required: true,
            validator: validateUpload2,
            trigger: 'change',
            type: 'number',
          },
        ],
        image_input: [{ required: true, validator: validateUpload, trigger: 'change' }],
        content: [{ required: true, message: '请输入文章内容', trigger: 'change' }],
      },
      statusList: [
        {
          value: 0,
          label: '待审核',
        },
        {
          value: 1,
          label: '审核通过',
        },
        {
          value: 2,
          label: '封禁',
        },
        {
          value: 3,
          label: '锁定',
        },
      ],
      value: '',
      modalPic: false,
      template: false,
      treeData: [],
      images: [],
      formValidate2: {
        type: 1,
      },
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: '',
      },
      type: 'add',
      universitList: [],
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '100px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  methods: {
    initData(data, type){
      this.type = type
      if (type == 'add') {
        this.formValidate = {
          id: 0,
          title: '',
          user_name: '',
          user_id: '',
          image_input: '',
          universit_id: 0,
          content: '',
          browse: 0,
          status: 0,
          pic: '',
          images: [],
        }
      }
      else {
        this.formValidate.id = data.id
        this.formValidate.title = data.title
        this.formValidate.user_id = data.user_id
        this.formValidate.user_name = data.user_name
        this.formValidate.content = data.content
        this.content = data.content
        this.formValidate.universit_id = data.universit_id
        this.formValidate.browse = data['browse']
        this.formValidate.status = data.status
        this.formValidate.pic = ''
        this.formValidate.images = data.images_label
      }
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move';
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move';
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.formValidate.images];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.formValidate.images = newItems;
    },
    handleRemove(i) {
      this.images.splice(i, 1);
      this.formValidate.images.splice(i, 1);
      this.formValidate[0].pic = this.formValidate.images[0];
    },
    // 关闭图片上传模态框
    changeCancel(msg) {
      this.modalPic = false;
    },
    // 点击商品图
    modalPicTap(tit, picTit = '', index = 0) {
      this.modalPic = true;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.tableIndex = index;
    },
    // 获取单张图片信息
    getPic(pc) {
      // switch (this.picTit) {
      //   case 'danFrom':
      //     this.formValidate.image = pc.att_dir;
      //     if (!this.$route.params.id) {
      //       if (this.formValidate.spec_type === 0) {
      //         this.formValidate[0].pic = pc.att_dir;
      //       } else {
      //         this.manyFormValidate.map((item) => {
      //           item.pic = pc.att_dir;
      //         });
      //         this.oneFormBatch[0].pic = pc.att_dir;
      //       }
      //     }
      //     break;
      //   case 'danTable':
      //     this.oneFormValidate[this.tableIndex].pic = pc.att_dir;
      //     break;
      //   case 'duopi':
      //     this.oneFormBatch[this.tableIndex].pic = pc.att_dir;
      //     break;
      //   case 'recommend_image':
      //     this.formValidate.recommend_image = pc.att_dir;
      //     break;
      //   default:
      //     if (this.manyFormValidate.length) this.manyFormValidate[this.tableIndex].pic = pc.att_dir;
      // }
      this.modalPic = false;
    },
    deleteRow(index) {
      this.formValidate.params_list.splice(index, 1);
    },
    // 获取多张图信息
    getPicD(pc) {
      this.images = pc;
      this.images.map((item) => {
        this.formValidate.images.push(item.att_dir);
        this.formValidate.images = this.formValidate.images.splice(0, 10);
      });
      this.formValidate[0].pic = this.formValidate.images[0];
      this.modalPic = false;
    },

    getEditorContent(data) {
      this.content = data;
    },
    // 过滤详情内容
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/max-max-width:[^;]+;/gi, 'max-width:100%;');
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(
          /\<img/gi,
          '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"',
      );
      return newContent;
    },
    // 提交数据
    onsubmit(name) {
      this.formValidate.content = this.content
      console.log(this.formValidate)
      this.$emit('postsAdd', this.formValidate)
    },
  },
  mounted() {

  },
  created() {
    getUniversitListApi({page:1,limit: 1000000}).then((res) =>{
      this.universitList = res.data.list
    })
  },
};
</script>
<style scoped lang="scss">
/* 调整对话框层级 */
.el-dialog {
  z-index: 2001 !important;
}
.el-dialog__wrapper + .el-dialog__wrapper .el-dialog {
  z-index: 2002 !important;
}

.grid_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-gap: 0;
}
.content_width {
  width: 414px;
}
::v-deep .ivu-form-item-content {
  line-height: unset !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid var(--prev-color-primary);
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: var(--prev-color-primary);
  padding: 0 12px;
  cursor: pointer;
}

.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
  font-size: 12px;
}



.pictrue  {
  width: 60px;
  height: 60px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img  {
    width: 100%;
    height: 100%;
  }.btndel  {
     position: absolute;
     z-index: 1;
     width: 20px !important;
     height: 20px !important;
     left: 46px;
     top: -4px;
   }
}.upLoad  {
   width: 58px;
   height: 58px;
   line-height: 58px;
   border: 1px dashed rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.02);
   cursor: pointer;
 }.curs  {
    cursor: pointer;
  }.inpWith  {
     width: 60%;
   }.labeltop  {
      ::v-deep .ivu-form-item-label  {
        float: none !important;
        display: inline-block !important;
        margin-left: 120px !important;
        width: auto !important;
      }
    }.video-icon  {
       background-image: url('https://cdn.oss.9gt.net/prov1.1/1/icons.png');
       background-color: #fff;
       background-position: -9999px;
       background-repeat: no-repeat;
     }.see  {
        color: #2d8cf0;
        cursor: pointer;
      }.trip  {
         color: #bbb;
         margin-bottom: 10px;
         font-size: 12px;
       }.virtual-data  {
          display: flex;
          align-items: center;
        }.add-more  {
           margin-top: 20px;
           display: flex;
         }.virtual-title  {
            width: 60px;
          }.scroll-virtual  {
             max-height: 400px;
             overflow-y: auto;
             margin-top: 10px;
           }.footer  {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 30px;.clear, .submit  {
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
  }.clear  {
     background-color: #ccc;
     margin-right: 20px;
   }.submit  {
      background-color: #2d8cf0;
    }
            }.picBox  {
               display: flex;
             }.btndel  {
                position: absolute;
                z-index: 9;
                width: 20px !important;
                height: 20px !important;
                left: 46px;
                top: -4px;
              }.ifam  {
                 width: 344px;
                 height: 644px;
                 background: url('phonebg.png') no-repeat center top;
                 background-size: 344px 644px;
                 padding: 40px 20px;
                 padding-top: 50px;
                 margin: 0 auto;.content  {
    height: 560px;
    overflow: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }.content::-webkit-scrollbar  {
     display: none; /* Chrome Safari */
   }
               }
::v-deep .ivu-date-picker {
  width: 300px;
}

.virtual_boder {
  border: 1px solid var(--prev-color-primary);
}

.virtual_boder2 {
  border: 1px solid #E7E7E7;
}

.virtual_san {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 26px solid var(--prev-color-primary);
  border-left: 26px solid transparent;
}

.virtual_dui {
  position: absolute;
  bottom: -2px;
  right: 2px;
  color: #FFFFFF;
  font-family: system-ui;
}

.virtual {
  width: 120px;
  height: 60px;
  background: #FFFFFF;
  border-radius: 3px;
  // border: 1px solid #E7E7E7;
  float: left;
  text-align: center;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
  line-height: 23px;

  .virtual_top {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  .virtual_bottom {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }
}

.virtual:nth-child(2n) {
  margin: 0 12px;
}

.addfont {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: var(--prev-color-primary);
  margin-left: 14px;
  cursor: pointer;
}

// .tips-info {
//   display: inline-bolck;
//   font-size: 12px;
//   line-height: 24px;
//   font-weight: 400;
//   color: #999999;
// }

.videbox {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  border: 1px dashed #DDDDDD;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  cursor: pointer;
}

.addCustom_content {
  margin-top: 20px;

  .custom_box {
    margin-bottom: 10px;
  }
}

.addCustomBox {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--prev-color-primary);

  .btn {
    cursor: pointer;
    width: max-content;
  }
}

.type-radio {
  margin-bottom: 10px;
}

.deteal-btn {
  color: #5179ea;
}

.stock-disk {
  margin: 10px 0;
}

.line {
  border-bottom: 1px dashed #eee;
  margin-bottom: 20px;
}

.labelInput {
  border: 1px solid #dcdee2;
  width: 414px;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}

#shopp-manager ::v-deep .ivu-form-item-content {
  line-height: 33px !important;
}

#selectvideo ::v-deep .ivu-form-item-content {
  line-height: 0px !important;
}

.progress {
  margin-top: 10px;
}

.labelInput ::v-deep .el-tag {
  color: #606266;
  background-color: #F0F2F5;
  border-color: #F0F2F5;
  margin-right: 6px;
}

.labelInput ::v-deep .el-tag .el-tag__close {
  color: #909399;
}

.labelInput ::v-deep .el-tag .el-tag__close:hover {
  color: #fff;
  background-color: #909399;
}

.brokerage {
  font-size: 12px;
}
.img-preview{
  width: 253px;
}
// 多规格设置
.specifications{
  .specifications-item:hover{
    background-color: var(--prev-color-primary-light-9);

  }
  .specifications-item:hover .del{
    display: block;
  }
  .specifications-item:last-child{
    margin-bottom: 14px;
  }
  .specifications-item{
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 15px;
    transition: all 0.1s;
    background-color: #fafafa;
    margin-bottom: 10px;
    border-radius: 4px;

    .del{
      display: none;
      position: absolute;
      right: 15px;
      top: 15px;
      font-size: 22px;
      color: var(--prev-color-primary);
      cursor: pointer;
      z-index: 9;
    }
    .specifications-item-box{
      position: relative;
      .lineBox{
        position: absolute;
        left: 13px;
        top: 24px;
        width: 30px;
        height: 45px;
        border-radius: 6px;
        border-left: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
      }
      .specifications-item-name{
        .el-icon-info{
          color: var(--prev-color-primary);
          font-size: 12px;
          margin-left: 5px;
        }
      }
      .specifications-item-name-input{
        width: 200px;
      }
    }
  }
}
</style>
